<template>
<div class="ask">
    <formHeader :title="'我的问答'"></formHeader>
<div class="title">
    <cube-tab-bar  @click="tabValue" v-model="selectedLabel" show-slider>
        <cube-tab v-for="(item) in tabLabels" :label="item.label" :key="item.label">
        </cube-tab>
    </cube-tab-bar>
</div>
<div class="conbox">
    <cube-tab-panels v-model="selectedLabel">
        <!-- 提问我的 -->
      <cube-tab-panel :label="tabLabels[0].label" :key="tabLabels[0].label">
            <cube-scroll
                  class="scroll"
                  ref="scroll"
                  :data = data
                  :options="options"
                  v-if="data.length!=0"
                  @pulling-up="onPullingUp">
                  <div class="box" v-for="item in data" :key="item.id" @click="toAnswer(item.id)">
                      <img :src="imgH+item.goods.img" alt="">
                      <div class="content">
                          <div class="user"><img :src="item.avatar" alt=""> 用户:{{item.userName}}&nbsp;&nbsp;向你求助</div>
                          <div class="name">{{item.content}}</div>
                          <div v-if="item.list.length==0" class="text"><span></span><span style="border-radius: 22px" class="answer">立即回答</span></div>
                          <div v-else class="text"><span></span><p style="color: #999;font-size: 13px;margin-left:15px;" >已回答</p></div>
                      </div>
                    </div>
            </cube-scroll>

        <div v-if="data.length==0" class="main"> <img src="./image/暂无1.png" alt=""> </div>
      </cube-tab-panel>
      <!-- 我的提问 -->
       <cube-tab-panel :label="tabLabels[1].label" :key="tabLabels[1].label">
            <cube-scroll
                  class="scroll"
                  ref="scroll"
                  :data = data
                  v-if="data.length!=0"
                  :options="options"
                  @pulling-up="onPullingUp">
                 <div class="box"  v-for="item in data" :key="item.id" @click="toAnswer(item.id)">
                   <img :src="imgH+item.goods.img" alt="">
                    <div class="content">
                        <div class="namebox">{{item.content}}</div>
                        <div class="text"><span>{{item.list.length!=0?'店铺：'+item.list[0].content:"暂无回答"}}</span>共{{item.list.length}}个回答<img src="./image/右1.png"></div>
                    </div>
                </div>
         </cube-scroll>
    <div  v-if="data.length==0"  class="main"><img src="./image/暂无1.png" alt=""> </div>
      </cube-tab-panel>
      <!-- 我的回答 -->
       <cube-tab-panel :label="tabLabels[2].label" :key="tabLabels[2].label">
                  <cube-scroll
                class="scroll"
                ref="scroll"
                :data = data
                v-if="data.length!=0"
                :options="options"
                @pulling-up="onPullingUp">
        <div class="boxA" v-for="(item) in data" :key="item.id" @click="toAnswer(item.id)">
            <div class="contentA">
                <img :src="imgH+item.goods.img" alt="">
                <div class="textA">
                    <div class="nameA">{{item.content}}</div>
                    <div class="ansA"><span>{{item.list.length!=0?"店铺："+item.list[0].content:"暂无回答"}}</span>共{{item.list.length}}个回答<img src="./image/右1.png" alt=""></div>
                </div>
            </div>
            <div class="time">{{item.time.split(" ")[0]}}</div>
        </div>
                </cube-scroll>
    <div v-if="data.length==0" class="main"> <img src="./image/暂无1.png" alt=""> </div>
      </cube-tab-panel>
    </cube-tab-panels>
</div>
</div>
</template>

<script>
import {myQuiz} from "@/api/goods";
import formHeader from '@/components/form-header'
    export default {
        name : "myAnswer",
        components:{ formHeader },
        data () {
            return {
                imgH: process.env.VUE_APP_IMG_DOMAIN,
                selectedLabel: '提问我的',
                disabled: false,
                page: 1,
                limit: 6,
                data: [],
                tabLabels: [{
                  label: '提问我的'
                }, {
                  label: '我的提问'
                }, {
                  label: '我的回答'
                }],
                loop: false,
                autoPlay: false,
                showDots: false,
                slideOptions: {
                    listenScroll: true,
                    probeType: 3,
                    directionLockThreshold: 0
                },
                options:{
                    pullUpLoad: true,
                    },
                value: 1
            }
        },
        activated(){
            this.onPullingUp()
        },
        methods:{
            back(){this.$router.go(-1) },
            toAnswer(id){
                this.$router.push("/answer?queryQuestionId="+id)
            },
            tabValue(label){
                this.$nextTick(()=>{
                this.page = 1
                 switch (label) {
                    case "提问我的":
                        this.value = 1
                        this.onPullingUp()
                        break;
                    case "我的提问":
                        this.value = 2
                        this.onPullingUp()
                        break;
                    case "我的回答":
                        this.value = 3
                        this.onPullingUp()
                        break;
                    }
                })
            },
             onPullingUp(){
                myQuiz(this.value,this.page,this.limit).then(res=>{
                      if(this.page == 1){
                          this.data = res.data
                      }else{
                          this.data = this.data.concat(res.data)
                      }
                     this.page++
                    if (this.data == null){
                        this.data=[]
                    }
                    if (res.data!=null&&res.data.length > 0){
                        this.$nextTick(()=>{
                            this.$refs.scroll.refresh()
                            this.$refs.scroll.$forceUpdate(true,true)
                        })
                    }
                  })
            },
        }
    }
</script>

<style scoped lang="stylus">


.scroll
    height 600px
.ask
    height 100%
    background-color #F4F3F3
    position relative
    z-index 2
    .title
        color #333333
        font-size 14px
        background-color #fff
        padding-top 1.5rem
    .conbox
        margin-top 15px
        .box
            width 350px
            height 100px
            margin  0 auto 15px
            background-color #fff
            display flex
            align-items center
            border-radius: 5px;
            img
                display inline-block
                width 76px
                height 76px
                margin 0 10px
            .content
                width 100%
                height 76px
                position relative
                .user
                    color #999
                    font-size 12px
                    position absolute
                    top 0
                    display flex
                    align-items center
                    img
                        margin 0 5px 0 0
                        width: 16px
                        height:16px;
                        display:inline-block;
                        border-radius:50%;
                .name
                    color #333
                    font-size 13px
                    font-weight 500
                    width 6.4rem
                    -webkit-line-clamp: 3;
                    line-clamp: 3;
                    overflow hidden
                    text-overflow: -o-ellipsis-lastline;
                    text-overflow: ellipsis;
                    position absolute
                    top 18px
                .namebox
                    color #333
                    font-size 13px
                    font-weight 500
                    height 1.05rem
                    -webkit-line-clamp: 3;
                    line-clamp: 3;
                    overflow hidden
                    text-overflow: -o-ellipsis-lastline;
                    text-overflow: ellipsis;
                    position absolute
                    top 0rem
                .text
                    color #999
                    font-size 12px
                    position absolute
                    white-space nowrap
                    bottom 0
                    display flex
                    align-items center
                    span
                        width 160px
                        display inline-block
                        white-space nowrap
                        text-overflow: -o-ellipsis-lastline;
                        text-overflow: ellipsis;
                        overflow hidden
                        margin-right 16px

                    img
                        width 11px
                        height 11px
                        display inline-block
                        margin 0
                    .answer
                        display inline-block
                        width 73px
                        height 22px
                        background-color #00d6c0
                        color #fff
                        float right
                        font-size 13px
                        line-height 22px
                        text-align center
        .boxA
            margin-bottom 15px
            height 100px
            width 350px
            margin  0 auto 15px
            background-color #fff
            border-radius: 5px;
            .time
                color #999
                font-size 12px
                margin 5px 10px
            .contentA
                height 60px
                display flex
                align-items center
                padding-top 15px
                img
                    display inline-block
                    width 60px
                    height 60px
                    margin 0 10px
                .textA
                    height 60px
                    font-size 12px
                    position relative
                    .naemA
                        height 1.05rem
                        color #333
                        font-size 13px
                        font-weight 500
                        position absolute
                        top 0
                        left 0
                        -webkit-line-clamp: 3;
                        line-clamp: 3;
                        overflow hidden
                        text-overflow: -o-ellipsis-lastline;
                        text-overflow: ellipsis;
                    .ansA
                        color #999
                        position absolute
                        left 0
                        bottom 0
                        white-space nowrap
                        display flex
                        align-items center
                        span
                            width 4.7rem
                            display inline-block
                            white-space nowrap
                            text-overflow: -o-ellipsis-lastline;
                            text-overflow: ellipsis;
                            overflow hidden
                            margin-right 16px
                        img
                            width 11px
                            height 11px
                            display inline-block
                            margin 0
        .main
            width 100%
            display flex
            background-color #fff
            justify-content space-around
            align-items center
            img
                display inline-block
                width 100%
                height 17rem

</style>
